<template>
  <span>
    <template v-if="link && Object.keys(link).length > 0">
      <a v-if="link.isLink" :href="link.url" :target="link.target || '_self'"
        ><u><span v-html="htmlValue"></span></u
      ></a>
      <router-link
        v-else
        :to="formatQuery(link, item)"
        target="_blank"
        class="blue"
      >
        <u><span v-html="htmlValue"></span></u>
      </router-link>
    </template>
    <template v-else>
      <u
        v-if="item && typeof item.callback === 'function'"
        class="cursor"
        @click="handle()"
        v-html="htmlValue"
      ></u>
      <span v-else v-html="htmlValue"></span>
    </template>
  </span>
</template>
<script>
import { getRowIdentity, formatMoney } from "@/utils/index";
export default {
  props: {
    prop: { type: String, default: "" },
    link: { type: Object, default: () => {} },
    unit: { type: String, default: "" },
    value: { type: [Number, String], default: "" },
    emptyText: { type: String, default: "" },
    type: { type: String, default: "text" },
    item: { type: Object, default: () => {} },
  },
  computed: {
    htmlValue() {
      return (
        (this.value
          ? this.subReplaceStr(this.value, this.type, this.emptyText)
          : this.getRowValue(this.item, this.prop, this.type, this.emptyText)) +
        this.unit
      );
    },
  },
  methods: {
    formatText(val, type, emptyText) {
      switch (type) {
        case "money":
          val = val !== undefined && val !== null ? formatMoney(val, ",") : "";
          break;
      }
      const text =
        val === 0 ? "0" : val === undefined || val === null ? emptyText : val;
      return text;
    },
    formatQuery(linkObject, item) {
      const query = {};
      if (linkObject && Object.keys(linkObject).length > 0) {
        if (
          item &&
          Object.keys(item).length > 0 &&
          linkObject.query &&
          linkObject.query.length > 0
        ) {
          linkObject.query.forEach((it) => {
            query[it.key] = it.value ? it.value : getRowIdentity(item, it.key);
          });
        }
        return {
          path: linkObject.url,
          query: query,
        };
      } else {
        return { path: "" };
      }
    },
    subReplaceStr(val, type, emptyText) {
      if (!val) return "";
      val = String(val);
      const prop = val.match(/\{(.+?)\}/);
      let tempProp = ["", ""];
      let propVal = "";
      if (prop && Array.isArray(prop)) {
        if (prop[1].indexOf("|") !== -1) {
          tempProp = prop[1].split("|");
          tempProp[1] = tempProp[1].replace(" ", "");
          prop[1] = tempProp[0].replace(" ", "");
        }
        const value = getRowIdentity(this.item, prop[1]);
        propVal = value ? value : tempProp[1];
      }
      propVal = this.formatText(propVal, type, emptyText);
      return val.replace(/\{(.+?)\}/, propVal);
    },
    getRowValue(row, rowKey, type, emptyText) {
      let val = getRowIdentity(row, rowKey);
      val = this.formatText(val, type, emptyText);
      return val;
    },
    handle() {
      this.item && typeof this.item.callback === "function"
        ? this.item.callback(this.item)
        : "";
    },
  },
};
</script>
<style lang="scss" scoped>
.blue,
::v-deep font {
  color: #ec6324;
}
.cursor {
  cursor: pointer;
}
</style>
